<template>
  <div>App</div>
  <p>count:{{ arr }}</p>
  <button @click="addAll">给每一个数组的值加1</button>

  <p>{{ cat }}</p>
  <button @click="changeCat">狸猫换太子</button>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  name: 'App',
})
</script>
<script setup lang="ts">

let arr = reactive<number[]>([1, 2, 3, 4])

const addAll = () => {
  //一旦reative创建的数据是被替换的，则不再用有响应式
  arr = arr.map((item) => item + 1)

  //ref创建的数据被替换的时候，替换的是ref对象的value属性，具有响应式
  const cat = ref({ name: "maomi", age: 3 })
  console.log(cat)
  const changeCat = () => {
    cat.value = { name: "taizi", age: 3 }
  }
}
/* 
  class RefImpl{
    //当ref对象被实例化的时候，就会把拿到的数据放在实例化对象的value属性上
    //当拿到的数据是基本类型值的时候，就直接放在了value属性上
    //当拿到的数据是对象类型值的，就会先创建当前对象的代理对象，然后再放在value属性上
    constructor(n){
      this.value = n
    }
    //RefImpl类有两个方法分别是getter和setter
    //当value属性的值被获取的时候，就会调用getter方法收集依赖
    //当value属性的值被设置的时候，就会调用setter方法通知依赖更新
    getter(){}
    setter(){}
  }
*/
</script>
<style lang="less" scoped>

</style>